<template>
  <div id="home">
    <my-skeleton v-if="initLoading"></my-skeleton>
    <nav-bar></nav-bar>
    <section>
      <div class="labelbar">
        <title-bar :CPNsign="false">
          <span slot="title">喜阅热门</span>
        </title-bar>
      </div>
      <div class="contentbar"><swipe-bar :data="hotList"></swipe-bar></div>
    </section>
    <section>
      <div class="labelbar">
        <title-bar :CPNsign="false">
          <span slot="title">喜阅榜单</span>
        </title-bar>
      </div>
      <top-card :data="weekRankList" type="week" CPNimgurl="week_bg.jpg">
        <span slot="bd-label">WEEK</span>
        <span slot="s-label">喜阅周榜</span>
        <span slot="l-label">好看小说</span>
      </top-card>
      <top-card :data="allRankList" type="all" CPNcolor="#32323b" CPNimgurl="all_bg.jpg">
        <span slot="bd-label">ALL</span>
        <span slot="s-label">喜阅总榜</span>
        <span slot="l-label">流量小说</span>
      </top-card>
    </section>
    <!-- <section>
        <div class="labelbar">
          <title-bar>
            <span slot="title">分类推荐</span>
          </title-bar>
        </div>
        <div v-for="(item, index) in datalist.kind" :key="index">
          <kind-label :to="'/kind/' + item.id"><template slot="label">{{ item.kind }}</template></kind-label>
          <div class="contentbar"><flex-row :data="item.data"></flex-row></div>
        </div>
      </section> -->
    <section>
      <div class="labelbar">
        <title-bar :CPNsign="false">
          <span slot="title">推荐阅读</span>
        </title-bar>
      </div>
      <book-list :data="recommendList"></book-list>
      <div class="nomore-tips">搜索阅读更多小说哟</div>
    </section>
  </div>
</template>

<script>
import MySkeleton from '@/components/MySkeleton.vue'
import TitleBar from '@/components/TitleBar.vue'
import SwipeBar from '@/components/SwipeBar.vue'
import FlexRow from '@/components/FlexRow.vue'
import KindLabel from '@/components/KindLabel.vue'
import TopCard from '@/components/TopCard.vue'
import BookList from '@/components/BookList.vue'
import NavBar from '@/components/NavBar.vue'
export default {
  name: 'homeView',
  components: {
    MySkeleton,
    TitleBar,
    SwipeBar,
    FlexRow,
    KindLabel,
    TopCard,
    BookList,
    NavBar,
  },
  data() {
    return {
      initLoading: true,
      hotList: [], // 热门
      allRankList: [], // 总榜
      weekRankList: [], // 周榜
      recommendList: [], // 推荐阅读
    }
  },
  created() {
    Promise.all([
      this.$bqg.getRecommend(),
      this.$bqg.getRank('hot'),
      this.$bqg.getRank('week'),
      this.$bqg.getRank('all'),
    ]).then(([
      res1,
      res2,
      res3,
      res4,
    ]) => {
      this.recommendList = Object.freeze(res1);
      this.hotList = res2;
      this.weekRankList = res3;
      this.allRankList = res4;
      this.initLoading = false;
      this.fetchImg([this.hotList, this.weekRankList, this.allRankList])
    })

  },
  methods: {
    fetchImg(array = []) {
      if (array.length == 0) {
        return
      }

      const doFn = (item) => {
        item.forEach(d => {
          this.$bqg.getInfo(d.path).then(res => {
            d.icon = res.icon;
            d.desc = res.desc;
          })
        });

        this.fetchImg(array);
      }

      requestAnimationFrame(() => doFn(array.shift()));
    }
  },
}
</script>

<style>
.navbar-banner {
  display: flex;
  box-sizing: border-box;
  padding: 0 18PX;
  width: 100%;
  height: 60PX;
  border-bottom: 1PX solid #ebebeb;
  align-items: center;
  background-color: #f7f7f7;
}

.labelbar {
  margin-bottom: 20px;
}

#home section {
  padding: 15px 0;
}

.nomore-tips {
  font-size: 12px;
  text-align: center;
  color: #ddd;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
</style>